<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-store">
    <meta http-equiv="Cache-Control" content="no-cache,no-store">
    <meta http-equiv="expires" content="0">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>活动规则</title>
    <link rel="stylesheet" href="/old/css/turnplate/turnble.scss?__inline" media="screen" title="no_title" charset="utf-8">
</head>
<body style="visibility: hidden;">
<div class="wrap">
    <div class="turnplate">
        <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
        <img class="pointer" src="/old/images/turnplate/pointer.png" alt="award rotation start" />
    </div>
    <div class="content">
        <div class="times">你还有2次机会哦!</div>
        <div class="links">
            <a class="my-prize">我的奖品</a>
            <a class="rules">活动规则</a>
            <a class="arrow"></a>
            <div class="tips">您是第<i>24897328</i>位参与者</div>
        </div>
        <div class="winners">
            <div class="title">中奖名单</div>
            <ul>
                <li>
                    <span>简爱</span>
                    <span>三星平板一台三星平板一台三星平板一台三星平板一台</span>
                </li>
                <li>
                    <span>简爱</span>
                    <span>三星平板一台</span>
                </li>
                <li>
                    <span>简爱</span>
                    <span>三星平板一台</span>
                </li>
                <li>
                    <span>简爱</span>
                    <span>三星平板一台</span>
                </li>
                <li>
                    <span>简爱</span>
                    <span>三星平板一台</span>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--<div class="mask-layer">-->
    <!--<div class="cover"></div>-->
    <!--<div class="content">-->
        <!--<div class="close icon"></div>-->
        <!--<div class="qr-code">-->
            <!--<img src="" alt=""/>-->
        <!--</div>-->
        <!--<div class="slogan">扫描二维码,关注公众号后参与活动</div>-->
    <!--</div>-->
<!--</div>-->
<script type="text/javascript">
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // 针对uc横竖屏rem html没有重绘的问题
                var style;
                if (style = document.getElementById("forhtml")) {
                    style.parentNode.removeChild(style);
                }
                style = document.createElement("style");
                style.id = "forhtml";
                document.head.appendChild(style);
                style.appendChild(document.createTextNode("html{font-size:" + 20 * (clientWidth / 320) + "px !important;}"));
            };
        recalc();
        document.body.style.visibility = 'visible';
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].addEventListener('touchstart', function () {
            }, false);
        }
    })(document, window);
</script>
<script src="/old/common/js/zepto.min.js"></script>
<script type="text/javascript" src="/old/common/js/awardRotate.js"></script>
<script>
    function QRCode(qrcode){
        var $mask = $('<div class="mask-layer">' +
            '             <div class="cover"></div>' +
            '             <div class="content">'+
            '                 <div class="close icon"></div>' +
            '                 <div class="qr-code"></div>' +
            '                 <div class="slogan">扫描二维码,关注公众号后参与活动</div>' +
            '             </div>' +
            '         </div>');
        $mask.find('.close.icon').click(function(e){
            $mask.remove();
        });
        return {
            open: function(){
                if(qrcode){
                    $mask.find('.qr-code').html('<img src="'+qrcode+'" alt="二维码"/>');
                }
                $('body').append($mask);
            },
            close: function(){
                $mask.remove();
            }
        }
    }
</script>
<script type="text/javascript">
    $(document).ready(function() {
       var qrcode = QRCode('/images/turnplate/qrCode.png');
       qrcode.open();
        // 转盘区域
        var turnplate = {
            restaraunts: [], //大转盘奖品名称
            colors: [], //大转盘奖品区块对应背景颜色
            outsideRadius: 178, //大转盘外圆的半径
            textRadius: 115, //大转盘奖品位置距离圆心的距离
            insideRadius: 46, //大转盘内圆的半径
            startAngle: 0, //开始角度

            bRotate: false //false:停止;ture:旋转
        };
        //动态添加大转盘的奖品与奖品区域背景颜色4927
        turnplate.restaraunts = ["一等奖", "二等奖","三等奖","四等奖","五等奖","谢谢参与","二等奖","三等奖",];
        turnplate.colors = ["#FEEF9D", "#FFDD76", "#FEEF9D","#FFDD76","#FEEF9D","#FFDD76","#FEEF9D","#FFDD76"];


        var rotateTimeOut = function() {
            $('#wheelcanvas').rotate({
                angle: 0,
                animateTo: 2160,
                duration: 8000,
                callback: function() {
                    alert('网络超时，请检查您的网络设置！');
                }
            });
        };

        //旋转转盘 item:奖品位置; txt：提示语;
        var rotateFn = function(item, txt) {
            var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2)) - 72;
            if (angles < 270) {
                angles = 270 - angles;
            } else {
                angles = 360 - angles + 270;
            }
            $('#wheelcanvas').stopRotate();
            $('#wheelcanvas').rotate({
                angle: 0,
                animateTo: angles + 1800,
                duration: 8000,
                callback: function() {
                    //showMask();
                    alert(txt);
                    turnplate.bRotate = !turnplate.bRotate;
                }
            });
        };
        $('.pointer').click(function() {
            if (turnplate.bRotate) return;
            turnplate.bRotate = !turnplate.bRotate;
            //获取随机数
            var item = rnd(1, turnplate.restaraunts.length);
            //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
            rotateFn(item, turnplate.restaraunts[item - 1]);
            console.log(item);
            $(this).unbind();
            $('.pointer').click(function() {
                alert("分享至朋友圈即可获取再次抽奖机会");
            });
            var t1 = setTimeout("$('.pointer').unbind()", 14900);
            var t2 = setTimeout(click2, 15000);
        });
        var click2 = function() {
            $('.pointer').click(function() {
                if (turnplate.bRotate) return;
                turnplate.bRotate = !turnplate.bRotate;
                var item = rnd2(1, turnplate.restaraunts.length);
                rotateFn(item, turnplate.restaraunts[item - 1]);
                $(this).unbind();
                $('.pointer').click(function() {
                    alert("2次抽奖机会已耗尽");
                });
            });
        }
        function rnd(n, m) {
            var rnd = Math.random();
            if (rnd <= .5) return 4;
            return 9;
        }

        function rnd2(n, m) {
            var rnd = Math.random();
            if (rnd <= .5) return 2;
            return 7;
        }


        //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
        window.onload = function() {
            drawRouletteWheel();
        };

        function drawRouletteWheel() {
            var canvas = document.getElementById("wheelcanvas");
            if (canvas.getContext) {
                //根据奖品个数计算圆周角度
                var arc = Math.PI / (turnplate.restaraunts.length / 2);
                var ctx = canvas.getContext("2d");
                //在给定矩形内清空一个矩形
                //ctx.clearRect(0,0,422,422);
                //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
                ctx.strokeStyle = "#FFBE04";
                //font 属性设置或返回画布上文本内容的当前字体属性
                ctx.font = '16px Microsoft YaHei';
                for (var i = 0; i < turnplate.restaraunts.length; i++) {
                    var angle = turnplate.startAngle + i * arc;
                    ctx.fillStyle = turnplate.colors[i];
                    ctx.beginPath();
                    //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
                    ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
                    ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
                    ctx.stroke();
                    ctx.fill();
                    //锁画布(为了保存之前的画布状态)
                    ctx.save();

                    //----绘制奖品开始----
                    ctx.fillStyle = "#fff";
                    var text_allin = turnplate.restaraunts;
                    console.log(text_allin.indexOf("8"));
                    var text = turnplate.restaraunts[i];
                    var line_height = 17;
                    //translate方法重新映射画布上的 (0,0) 位置
                    ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
                    console.log((angle + arc / 2 + Math.PI / 2));
                    //rotate方法旋转当前的绘图
                    ctx.rotate(angle + arc / 2 + Math.PI / 2 - 1.64); //-1.64定位

                    /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
                    ctx.fillStyle = "#BC6619";
                    ctx.font = 'bold 20px Microsoft YaHei';
                    ctx.textAlign = "center";
//                    ctx.rotate(90* Math.PI/180);
                    ctx.fillText(text, 0, 8);
//                    ctx.fillText(text, 0, 15);
//                    ctx.fillText(text, 12, 5);
                    //把当前画布返回（调整）到上一个save()状态之前
                    ctx.restore();
                    //----绘制奖品结束----
                }
            }
        }
    });
</script>
</body>
</html>